<template>
	<view v-if="show" style="padding: 50rpx; ">
		<view style="float: left;margin: 0rpx 0 30rpx 0; font-size: 40rpx ; ">共{{cardNum}}张</view>
		<view style="float: right; margin: 0rpx 0 30rpx 0; font-size: 34rpx ; color: #1890ff;"@click="addCard">
			+ 添加银行卡
		</view>
		<view v-for="item in bankCardList" :key="item.id">
			<card :cardData="item" @initData="getBankCardList">{{}}</card>
		</view>
	</view>
	<view v-else style="margin: 150rpx 0;text-align: center;" >
		<u-icon name="photo" style="font-size: 170rpx;"></u-icon>
		<view style="font-size: 40rpx; margin-bottom: 60rpx;">您还未添加银行卡</view>
		<u-button style="color: #FFF; background-color: #1890ff; width: 90%; margin-top: 40rpx;" @click="addCard">去添加
		</u-button>
	</view>
</template>

<script>
	import card from "./component/card.vue"
	export default {
		components: {
			card
		},
		data() {
			return {
				cardNum: 0,
				show:true,
				bankCardList:[],

			}
		},
		onLoad() {
			// this.getBankCardList()
		},
		onShow() {
			this.getBankCardList()
		},
		onHide() {
			this.bankCardList = []
		},
		async onPullDownRefresh() {
			await this.getBankCardList()
			uni.stopPullDownRefresh()
		},
		methods: {
			// 获取银行卡列表
			getBankCardList(){
				this.$u.api.getBankCardList().then(res=>{
					if(res.code == 1){
						this.bankCardList = res.data
						this.cardNum = res.data.length
					}
				})
			},
			addCard() {
				// this.$u.route('/pages/center/addCard/addCard')
				this.$Router.push({name:"addCard"})
			}
		}
	}
</script>

<style scoped>
</style>
